import React, {Component} from 'react'

import {PageHeader, Breadcrumb, Input, Form, Row, Col, Button, Table, Tooltip, message, Modal} from "antd";
import {PlusOutlined} from '@ant-design/icons'

import axios from "@src/lib/axios";

import "@src/style/product.scss";
import "@src/style/tableCom.scss";
import "@src/style/common.scss";
const formRef = React.createRef();


export default class Attraction extends Component {
    constructor(props) {

        super(props)

        this.state = {
            params: {
                page: 1,
                limit: 15
            },
            row: null,
            dataItem: {},
            modalRef: React.createRef(),
            modal_show: false,
            modal_title: '',

            initialVal: {},
            confirmLoading: false,
            loading: false,
            total: 0,
            attraction_list: []
        }
    }

    componentDidMount() {
        this.fetchData()
;    }

    fetchData = () => {
        this.setState({loading: true});
        const {params} = this.state;
        axios.post("/platform/common/conf/attractions/list", params).then(res => {
            if (res.code === 0) {
                let data = res.data;
                this.setState({
                    attraction_list: data.list,
                    total: data.total
                });
                this.setState({loading: false});
            }
        });
    }

    onValuesChange = (changedValues) => {
        Object.assign(this.state.params, {...changedValues});
        this.fetchData();
    }


    onFinish = () => {
        console.log('finish')
    }

    onChangePage = (page) => {
        this.state.params.page = page;
        this.fetchData();
    }
    onSearch = () => {
        let {params} = this.state
        console.log('params', params);
    }
    //显示添加弹窗
    onShowModal = (title, record) => {
        let row = null
        if (title === '编辑') {
            row = record
            this.setState({modal_show: true, modal_title: title, modalRef: React.createRef(), row});
            console.log(this.state.modalRef)
        }else{
            this.setState({modal_show: true, modal_title: title, modalRef: React.createRef(),row})
        }
    }

    handleOk = () => {
        this.setState({confirmLoading:true})
        let {modalRef, row} = this.state;

        if (row) {
            let formData = modalRef.current.getFieldValue();

            axios.post('/platform/common/conf/attractions/update', formData).then(res => {
                this.setState({confirmLoading:false})
                if (res.code !== 0) {
                    message.warn(res.msg)
                } else {
                    this.setState({modal_show:false})
                    message.success(res.msg)
                }
                this.fetchData()
            }).catch(err=>{
                this.setState({confirmLoading:false})
            })
        } else {
            let formData = modalRef.current.getFieldValue();
            axios.post('/platform/common/conf/attractions/add', formData).then(res => {
                this.setState({confirmLoading:false})
                if (res.code !== 0) {
                    message.warn(res.msg)
                } else {
                    this.setState({modal_show:false})
                    message.success(res.msg)
                }
                this.fetchData()
            })
        }


    }

    //删除
    onDelete = (id) => {
        axios.post('/platform/common/conf/attractions/delete',{id}).then(res=>{
            if (res.code !== 0) {
                message.warn(res.msg)
            }else{
                message.success(res.msg)
                this.fetchData()
            }
        })
    }
    handleCancel = () => {
        this.setState({modal_show: false})
    }

    render() {
        let {params, loading, attraction_list, total, initialVal, modal_title, modal_show, confirmLoading, row} = this.state


        const columns = [
            {
                title: "景点名称",
                width: 200,
                dataIndex: "title",
                align: "center",
                ellipsis: {showTitle: false},
                key:"title",
                render: (title) => {
                    return (
                        <Tooltip placement="topLeft" title={title}>
                            {title}
                        </Tooltip>
                    )
                }
            },
            {
                title: "操作",
                width: 80,
                align: "center",
                key:"id",
                render: (e, row) => {

                    return (
                        <>
                            <Button type="link" onClick={() => this.onShowModal('编辑',row)}>编辑</Button>
                            <Button type="link" onClick={() => this.onDelete(row.id)}>删除</Button>
                        </>
                    )
                }
            }
        ];

        return (
            <div style={{padding: "0 15px 100px 15px", background: "#fff"}}>
                <Modal
                    title={modal_title}
                    visible={modal_show}
                    onOk={this.handleOk}
                    confirmLoading={confirmLoading}
                    onCancel={this.handleCancel}
                    destroyOnClose={true}
                    forceRender={true}
                >
                    <Form
                        ref={this.state.modalRef}
                        size="middle"
                        name="basic"
                        initialValues={row}
                    >

                        <Form.Item
                            colon={false} label="景点名称" name="title"
                            rules={[{required:true,message:"景点不能为空"}]}
                        >
                            <Input placeholder={"输入景点名称"}/>
                        </Form.Item>

                    </Form>
                </Modal>
                <div style={{padding: "10px 0px 1px 0px"}}>
                    <Breadcrumb>
                        <Breadcrumb.Item>配置管理</Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <a href="">景点配置</a>
                        </Breadcrumb.Item>
                    </Breadcrumb>

                    <PageHeader
                        className="site-page-header"
                        title="景点信息配置"
                        subTitle="配置国内国外景点信息"
                    />
                    <Row style={{padding: "20px 0 0 0"}}>
                        <Col span={24}>
                            <Form
                                rel={formRef}
                                size="middle"
                                labelCol={{span: 6}}
                                wrapperCol={{span: 24}}
                                name="basic"
                                initialValues={initialVal}
                                onValuesChange={this.onValuesChange}
                            >
                                <Row gutter={20}>
                                    <Col span={8}>
                                        <Form.Item
                                            colon={false} label="景点名称" name="title"
                                        >
                                            <Input/>
                                        </Form.Item>
                                    </Col>
                                    <Col span={5}>
                                        <Button type="primary" onClick={() => this.onShowModal('添加景点')}><PlusOutlined/>创建</Button>
                                    </Col>
                                </Row>
                            </Form>
                        </Col>
                    </Row>

                    <Table
                        size="small"
                        loading={loading}
                        columns={columns}
                        rowKey="id"
                        dataSource={attraction_list}
                        pagination={{
                            total,
                            pageSize: 15,
                            current: params.page,
                            onChange: this.onChangePage
                        }}
                    />

                </div>
            </div>
        )
    }
}
